<template>
  <div class="more">
    <div class="nav">
      <van-icon
        name="arrow-left"
        @click="goback"
      />
      <span class="title">更多</span>
    </div>
    <div class="top">
      <div class="run">
        <van-icon
          name="flag-o"
          class="t_icon"
        />
        <div class="r_txt">
          <p class="r_top">跑步电台</p>
          <p class="r_bot">智能匹配步频</p>
        </div>
      </div>
      <div class="kiss">
        <van-icon
          name="star-o"
          class="t_icon"
        />
        <div class="r_txt">
          <p class="r_top">亲子模式</p>
          <p class="r_bot">宝宝定制音乐包</p>
        </div>
      </div>
    </div>
    <div class="option">
      <p
        class="o_line"
        v-for="item in topline"
        :key="item.id"
        @click="toInstall(item.id)"
      >
        <span class="o_title">{{item.title}}</span>
        <span class="o_content">{{item.content}}</span>
        <van-icon name="arrow" />
      </p>
      <van-cell-group>
        <van-switch-cell
          v-model="checked"
          title="定时关闭"
        />
      </van-cell-group>
      <p
        class="o_line"
        v-for="item in botline"
        :key="item.id"
      >
        <span class="o_title">{{item.title}}</span>
        <span class="o_content">{{item.content}}</span>
        <van-icon name="arrow" />
      </p>
      <p class="checkout">退出QQ音乐</p>
    </div>
  </div>
</template>
<script>
export default {
  data: () => ({
    checked: false,
    show: false,
    topline: [
      {
        id: 0,
        title: '设置',
        content: '点我'
      },
      {
        id: 1,
        title: '个性化装扮中心',
        content: '换超炫头像挂件'
      },
      {
        id: 2,
        title: '开放平台',
        content: ''
      },
      {
        id: 3,
        title: '免流量服务',
        content: '王卡听歌免流量送绿钻'
      },
      {
        id: 4,
        title: '票务',
        content: ''
      },
      {
        id: 5,
        title: '百变彩铃',
        content: '百万铃声随心选'
      }
    ],
    botline: [
      {
        id: 7,
        title: '听歌识曲',
        content: '可以边刷视频边识曲了'
      },
      {
        id: 8,
        title: '导入外部歌单',
        content: ''
      },
      {
        id: 9,
        title: '添加桌面小组件',
        content: ''
      },
      {
        id: 10,
        title: '微云音乐网盘',
        content: ''
      },
      {
        id: 11,
        title: '清理占用空间',
        content: ''
      },
      {
        id: 12,
        title: '安全中心',
        content: ''
      },
      {
        id: 13,
        title: '青少年模式',
        content: '未开启'
      },
      {
        id: 14,
        title: '帮助与反馈',
        content: ''
      }
    ]
  }),
  methods: {
    showPopup() {
      this.show = true
    },
    toInstall(i) {
      if (i !== 0) return
      this.$router.push({ path: '/install' })
    },
    goback() {
      this.$router.go(-1);
    }
  }
}
</script>
<style lang="scss">
.more {
  background-color: #eee;
  height: 900px;
  .nav {
    height: 60px;
    width: 100%;
    display: flex;
    justify-content: space-between;
    margin-left: 10px;
    align-items: center;
    .title {
      flex: 1;
      text-align: center;
    }
  }
  .top {
    display: flex;
    padding: 10px;
    .run,
    .kiss {
      background-color: #f5f4f4;
      width: 49%;
      margin-top: 10px;
      display: flex;
      line-height: 14px;
      font-size: 14px;
      border-radius: 10px;
      .r_top {
        font-weight: 600;
      }
      .r_bot {
        font-size: 12px;
        color: #aaa;
      }
      .t_icon {
        font-size: 40px;
        width: 70px;
        text-align: center;
        line-height: 70px;
      }
    }
    .run {
      margin-right: 10px;
    }
  }
  .option {
    .o_line {
      display: flex;
      justify-content: space-between;
      margin: 0 10px;
      line-height: 44px;
      color: #aaa;
      height: 44px;
      .van-icon {
        margin-left: 10px;
        line-height: 44px;
      }
      .o_title {
        flex: 1;
        color: #000;
      }
      .o_content {
        font-size: 12px;
      }
    }
    .van-cell {
      background-color: #eee;
      font-size: 16px;
      padding: 20px 10px 10px;
      margin-top: 10px;
      border-top: 1px solid #ddd;
      .van-switch {
        background-color: #ddd;
      }
      .van-switch--on {
        background-color: #31c27c;
      }
    }
    .checkout {
      width: 100%;
      height: 40px;
      margin: 10px;
      background-color: #f5f4f4;
      text-align: center;
      line-height: 40px;
      color: tomato;
      border-radius: 25px;
    }
  }
}
</style>
